<template>
<!-- 第一种写法 -->
 <!-- <div>
  <div class="news-title">{{query.title}}</div>
  <div class="news-content">{{query.content}}</div>
  <div class="news-date">{{query.date}}</div>
 </div> -->
<!-- 第二种写法 -->
 <!-- <div>
  <div class="news-title">{{params.title}}</div>
  <div class="news-content">{{params.content}}</div>
  <div class="news-date">{{params.date}}</div>
 </div> -->
 <!-- 第三种写法 props -->
 <div>
  <div class="news-title">{{title}}</div>
  <div class="news-content">{{content}}</div>
  <div class="news-date">{{date}}</div>
 </div> 
</template>
<script lang="ts" setup>
// 第一种写法 router query传参
// import {ref,toRefs} from 'vue'
// import {useRoute} from 'vue-router'
// const route = useRoute()
// // const {query} = route 这样的写法会导致响应式失效
// // 如果想要响应式生效，需要使用toRefs
// const {query} = toRefs(route)

// 第二种写法 router params传参
// import {ref,toRefs} from 'vue'
// import {useRoute} from 'vue-router'
// const route = useRoute()
// console.log(route)

// const {params} = toRefs(route)

// 第三种写法 props
import {defineProps} from 'vue'
defineProps({
  title:String,
  content:String,
  date:String
})

</script>
<style scoped></style>